<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-10-18 16:54:52
 * @LastEditTime : 2023-12-15 10:32:45
-->
<script lang="ts" name="ConfigPage" setup>
import { ref } from 'vue'
import { systemConfig } from '@/system.config'

const activeName = ref('login')
const config = ref(systemConfig)
const visible = ref(false)
const handCreateConfig = () => {
  visible.value = true
}
const handelClosed = () => {
  visible.value = false
}
</script>

<template>
  <IkPageMain>
    <el-card class="platform-config">
      <template #header>
        <h2>平台 - 可自定义配置项</h2>
        <el-button type="primary" @click="handCreateConfig">生成配置文件</el-button>
      </template>
      <el-tabs v-model="activeName" tab-position="left" class="h-full">
        <el-tab-pane label="登录页配置" name="login">
          <div class="login-config" shadow="always">
            <el-form
              label-position="top"
              label-width="200px"
            >
              <el-form-item label="仅显示背景图片(无动画块)">
                <el-switch v-model="config.loginOnlyBg" />
              </el-form-item>
              <el-form-item label="登录表单位置标题">
                <el-input v-model="config.loginTitle" clearable />
              </el-form-item>
              <el-form-item label="背景图地址">
                <el-input v-model="config.loginBg" clearable>
                  <template #prepend>public/system-config/</template>
                </el-input>
              </el-form-item>
              <el-form-item label="暗黑模式背景图地址">
                <el-input v-model="config.loginBgDark" clearable>
                  <template #prepend>public/system-config/</template>
                </el-input>
              </el-form-item>
              <el-form-item label="平台自定义登录页面Vue文件地址(使用平台登录页时不可填写)">
                <el-input v-model="config.loginComponentPath" clearable>
                  <template #prepend>MicroApp/views/</template>
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="显示'忘记密码?'">
                    <el-switch v-model="config.loginTools.forgetPassword" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="显示'创建账号'">
                    <el-switch v-model="config.loginTools.register" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="显示'记住我'">
                    <el-switch v-model="config.loginTools.remberMe" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="其它登陆方式(只支持密码时全部取消勾选)">
                <el-checkbox-group v-model="config.loginTools.loginType">
                  <el-checkbox label="password">密码</el-checkbox>
                  <el-checkbox label="phone">手机号</el-checkbox>
                  <el-checkbox label="wx">微信</el-checkbox>
                  <el-checkbox label="dd">钉钉</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <img src="../../../assets/images/config/login.png" class="h-full">
          </div>
        </el-tab-pane>
        <el-tab-pane label="平台配置" name="page">
          <div class="sys-config">
            <img src="../../../assets/images/config/nav.png" class="w-full">
            <el-form
              label-position="top"
              label-width="200px"
            >
              <el-row :gutter="12">
                <el-col :span="24">
                  <el-form-item label="平台首页路由(登录后跳转的路由。设置为''时将使用路由列表中的第一个路由)">
                    <el-input v-model="config.homePage" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="平台标题">
                    <el-input v-model="config.sysTitle" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="平台LOGO">
                    <el-input v-model="config.sysIcon" clearable>
                      <template #prepend>public/system-config/</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                  <el-form-item label="平台slogan(导航栏标语)  多条标语使用,分割">
                    <el-input v-model="config.navTitle" clearable />
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="多条slogan间隔(px)">
                    <el-input-number v-model="config.navTitleMargin" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <el-form-item label="显示'切换租户'">
                    <el-switch v-model="config.tools.tenant" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'搜索'">
                    <el-switch v-model="config.tools.search" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'消息'">
                    <el-switch v-model="config.tools.notice" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'语言切换'">
                    <el-switch v-model="config.tools.i18n" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'全屏'">
                    <el-switch v-model="config.tools.fullScreen" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'刷新'">
                    <el-switch v-model="config.tools.refresh" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'主题切换'">
                    <el-switch v-model="config.tools.theme" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'设置'">
                    <el-switch v-model="config.tools.setting" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="显示'用户信息'">
                    <el-switch v-model="config.tools.userInfo" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消息配置" name="news">
          <el-form
            label-position="top"
            label-width="200px"
          >
            <el-form-item label="跳转地址（点击导航栏消息图标面板中的‘进入消息列表’时的跳转地址）">
              <el-input v-model="config.newLinkPath" placeholder="请输入跳转地址" clearable />
            </el-form-item>
            <el-form-item label="自定义导航栏消息面板Vue文件地址">
              <el-input v-model="config.newsComponentPath" clearable>
                <template #prepend>MicroApp/views/</template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="审批配置" name="approve">
          <el-form
            label-position="top"
            label-width="200px"
          >
            <el-form-item label="自定义导航栏消息面板Vue文件地址">
              <el-input v-model="config.arrpove!.componentPath" clearable>
                <template #prepend>MicroApp/views/</template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="config.organiza" label="组织配置" name="organiza">
          <el-form
            label-position="top"
            label-width="200px"
          >
            <el-form-item label="启用“组织”功能">
              <el-switch v-model="config.organiza.enable" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog
      v-model="visible"
      width="1000px"
      draggable
      :close-on-click-modal="false"
      title="配置文件 （点击右下角 “复制“ 图标，复制代码后粘贴到平台src/system-config.ts文件内）"
      @closed="handelClosed"
    >
      <IkMonacoEditor
        class="w-full"
        language="typescript"
        :height="600"
        :code="config"
      />
    </el-dialog>
  </IkPageMain>
</template>

<style lang="scss" scoped>
.platform-config{
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  width: 60%;

  :deep(.el-card__header){
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  :deep(.el-tabs__header.is-left){
    height: 710px;
  }

  :deep(.el-tabs__content){
    height: 710px;
    overflow-y: auto;
  }

.login-config{
     padding-left: 12px;
    display: flex;
    justify-content: space-between;

     .el-form-item__label{
      font-weight: 600;
     }

  .frame-content{
    width: 100vw;
    height: 100vh;
    transform: scale(0.75);

    iframe{
      width: 100%;
      height: 100%;
    }
  }
}
}
</style>
